<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable @register="registerTable" class="w-full xl:full" :searchInfo="searchInfo">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增医院</a-button>
        <a-button
          type="primary"
          danger
          @click="handleDelete"
          v-show="(deleteVisible = getSelectRowKeys().length > 0)"
          >批量删除</a-button
        >
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                tooltip: '编辑医院资料',
                onClick: handleEdit.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                tooltip: '删除此账号',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDeleteRows.bind(null, record.id),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <HospitalModal @register="registerModal" @success="handleSuccess"/>
  </PageWrapper>
</template>

<script lang="ts" >
  import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Modal, message } from "ant-design-vue";
import { ref, reactive, createVNode, defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import { columns, searchFormScheme } from "./hospital.data";
import { listHospital, removeHospital } from "/@/api/demo/hospital";
import { useModal } from "/@/components/Modal";
import HospitalModal from "./HospitalModal.vue";
import { PageWrapper } from "/@/components/Page";
import { BasicTable, TableAction, useTable } from "/@/components/Table";
import { useMessage } from "/@/hooks/web/useMessage";
    export default defineComponent({
        name:'HospitalManagement',
        components:{ HospitalModal,BasicTable, PageWrapper, TableAction, Modal},
        setup(){
        const deleteVisible = ref(false)
        const { createErrorModal } = useMessage()
        const { t } = useI18n() 
        const [registerModal, { openModal }] = useModal()
        const searchInfo = reactive<Recordable>({})
        const [registerTable, { reload, getSelectRowKeys }] = useTable({
          title: '医院列表',
          api: listHospital,
          rowKey: 'id',
          columns,
          formConfig: {
            labelWidth: 120,
            schemas: searchFormScheme,
            autoSubmitOnEnter: true,
          },
          useSearchForm: true,
          showTableSetting: true,
          bordered: true,
          handleSearchInfoFn(info) {
            return info
          },
          actionColumn: {
            width: 120,
            title: '操作',
            dataIndex: 'action',
            // slots: { customRender: 'action' },
          },
        })

         function handleCreate() {
          openModal(true, {
            isUpdate: false,
          })
        }

        function handleEdit(record: Recordable) {
          openModal(true, {
            record,
            isUpdate: true,
          })
        }

        function handleDelete() {
          Modal.confirm({
            title: () => '批量删除',
            icon: () => createVNode(ExclamationCircleOutlined),
            content: () => createVNode('div', { style: 'color:red;' }, '您想要删除这些用户吗?'),
            onOk() {
              handleDeleteRows()
            },
            onCancel() {
            },
            class: 'test',
          })
        }

        function handleSuccess() {
          reload()
        }

        function handleDeleteRows(id?: string, _?: Event) {
          const rowsKey: string[] = id ? [id] : getSelectRowKeys()
          console.log('rowsKey', rowsKey)

          removeHospital({ ids: rowsKey })
            .then(() => {
              message.success(t('sys.api.successMessage'))
              reload()
            })
            .catch((error) => {
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
              })
            })
            .finally()
        }
        return {
            registerTable,handleCreate,deleteVisible,getSelectRowKeys,handleDelete,
            handleEdit,handleDeleteRows,searchInfo,registerModal,handleSuccess
        }
        }
    })
           

</script>

<style></style>
